<script setup>
//导入getLikeListAPI
import PageContainer from './PageContainer.vue'
// 导入userStore
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
import { ref } from 'vue'
console.log(userStore.userInfo);

// 直接从 userStore.userInfo 中解构所需的四个参数
const { account, nickname, mobile, id } = userStore.userInfo;

//创建一个响应式对象，用于存储用户信息,将用户信息存储到响应式对象中
const userInfo = ref({ account, nickname, mobile, id})
//创建一个响应式对象，用于存储表单验证规则
console.log(userInfo);
const rules = {
  account: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      pattern: /^\S{2,12}$/, // 非空格字符，长度为2-10
      message: '昵称必须是2-12位的非空字符串',
      trigger: 'blur'
    }
  ],
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}$/, // 非空格字符，长度为2-10
      message: '用户名必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  mobile: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    {
      pattern: /^1\d{10}$/, // 以1开头，后跟10位数字，总共11位
      message: '请输入有效的11位联系电话',
      trigger: 'blur'
    }
  ]
};
//提交修改的逻辑
//这个formRef是表单的实例，通过ref来获取
const formRef = ref()
//表单提交
const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    //调用修改接口
    // await userUpdateInfoService(userInfo.value)
    //更新用户信息
    // await userStore().getUserInfo()
    // await getUser()
    ElMessage.success('修改成功')
  }
}
</script>

<template>
  <div class="home-overview">
    <!-- 用户信息 -->
  <!-- <div class="user-meta">
    <div class="avatar">
      <img :src="userStore.userInfo?.avatar" />
    </div>
    <h4 style="color:  #ff5000;">{{ userStore.userInfo?.account }}</h4>
  </div> -->
  <page-container title="个人中心">
    <!-- 表单提交 -->
    <el-row>
      <!-- //表单 -->
      <el-col :span="12">
        <el-form :model="userInfo" :rules="rules" ref="formRef" label-width="100px" size="large">
          <el-form-item label="账号" prop="account">
            <!-- //用户名不可修改 -->
            <el-input v-model="userInfo.account" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="userInfo.nickname"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input v-model="userInfo.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" style="margin-left: 30%;">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </page-container>
  </div>
</template>

<style scoped lang="scss">
.home-overview {
  height: 100%;
  background: url(@/assets/images/center-bg.png) no-repeat center / cover;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: white;
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: white;
      font-size: 16px;
      text-align: center;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 32px;
      }
    }
  }
}



.home-panel {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 20px;
  height: 400px;

  .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    h4 {
      font-size: 22px;
      font-weight: 400;
    }

  }

  .goods-list {
    display: flex;
    justify-content: space-around;
  }
}
</style>